<!doctype html>
<html lang="en">
<title>Inspectable pages</title>
<meta name="referrer" content="no-referrer">
<style>
body {
  color: #222;
  font-family: Helvetica, Arial, sans-serif;
  margin: 0;
  text-shadow: rgba(255, 255, 255, 0.496094) 0px 1px 0px;
}

#caption {
  font-size: 16px;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 20px;
  height: 20px;
  text-align: left;
}

#items {
  display: flex;
  flex-direction: column;
  margin: 10px;
}

.item {
  color: #222;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  padding: 10px;
  transition-property: background-color, border-color;
  transition: background-color 0.15s, 0.15s;
  transition-delay: 0ms, 0ms;
}

.item:not(.connected):hover {
  background-color: rgba(242, 242, 242, 1);
  border-color: rgba(110, 116, 128, 1);
  color: black;
}

.item.connected:hover {
  border-color: rgba(184, 184, 184, 1);
  color: rgb(110, 116, 128);
}

.item.custom {
    cursor: pointer;
}

.description {
  display: flex;
  flex-direction: column;
}

.title, .subtitle, .custom-url {
  font-size: 13px;
  margin: 4px 0px 0px 6px;
  overflow: hidden;
  padding-left: 20px;
}

.title {
  background-repeat: no-repeat;
  background-size: 16px;
  font-size: 15px;
}

.custom-url {
  display: flex;
}

.custom-url-label {
  flex: 0 0 auto;
}

.custom-url-value {
  font-family: monospace;
  margin-left: 1em;
}

</style>

<script>

function onLoad() {
  var tabsListRequest = new XMLHttpRequest();
  tabsListRequest.open('GET', '/json/list', true);
  tabsListRequest.onreadystatechange = onReady;
  tabsListRequest.send();
}

function onReady() {
  if(this.readyState == 4 && this.status == 200) {
    if(this.response != null)
      var responseJSON = JSON.parse(this.response);
      for (var i = 0; i < responseJSON.length; ++i)
        appendItem(responseJSON[i]);
  }
}

function onBlur(event) {
  const selection = window.getSelection();
  selection.removeAllRanges();
  event.stopPropagation();
  event.preventDefault();
}

function onFocus(selectElement, event) {
  selectNodeText(selectElement, event);
  event.stopPropagation();
  event.preventDefault();
}

function customFrontendURL(url) {
  if (!url || !window.location.hash)
    return null;

  var hashParams = new URLSearchParams(location.hash.substring(1));
  if (!hashParams.get("custom"))
    return null;

  var searchIndex = url.indexOf("?");
  if (searchIndex === -1)
    return null;
  var originalParams = url.substring(searchIndex + 1);
  if (hashParams.get("experiments"))
    originalParams += "&experiments=true";

  return "devtools://devtools/custom/inspector.html?" + originalParams;
}

function appendItem(item_object) {
  var item_element;
  var customURL = customFrontendURL(item_object.devtoolsFrontendUrl);
  if (customURL) {
    item_element = document.createElement('div');
    item_element.title = item_object.title;
    item_element.className = 'custom';
  } else if (item_object.devtoolsFrontendUrl) {
    item_element = document.createElement('a');
    item_element.href = item_object.devtoolsFrontendUrl;
    item_element.title = item_object.title;
  } else {
    item_element = document.createElement('div');
    item_element.className = 'connected';
    item_element.title = 'The tab already has an active debug session';
  }
  item_element.classList.add('item');

  var description = document.createElement('div');
  description.className = 'description';

  var title = document.createElement('div');
  title.className = 'title';
  title.textContent = item_object.description || item_object.title;
  if (item_object.faviconUrl) {
    title.style.backgroundImage = 'url(' + item_object.faviconUrl + ')';
  }
  description.appendChild(title);

  var subtitle = document.createElement('div');
  subtitle.className = 'subtitle';
  subtitle.textContent = (item_object.url || '').substring(0, 300);
  description.appendChild(subtitle);

  if (customURL) {
    var urlContainer = document.createElement('div');
    urlContainer.classList.add("custom-url");
    var urlLabel = document.createElement('div');
    urlLabel.classList.add("custom-url-label");
    urlLabel.textContent = "Click to copy URL:";
    urlContainer.appendChild(urlLabel);
    var urlValue = document.createElement('div');
    urlValue.classList.add("custom-url-value");
    urlValue.textContent = customURL;
    urlValue.tabIndex = 0;
    urlValue.addEventListener('blur', onBlur);
    urlValue.addEventListener('focus', event => onFocus(urlValue, event));
    urlContainer.appendChild(urlValue);
    description.appendChild(urlContainer);
    item_element.addEventListener('click', selectNodeText.bind(null, urlValue));
  }

  item_element.appendChild(description);

  document.getElementById('items').appendChild(item_element);
}

function selectNodeText(selectElement, event)
{
  var selection = window.getSelection();
  if (!selection.isCollapsed)
    return;
  var range = document.createRange();
  range.selectNode(selectElement);
  selection.removeAllRanges();
  selection.addRange(range);
  event.stopPropagation();
  event.preventDefault();
}
</script>
</head>
<body onload='onLoad()'>
  <div role='main'>
    <div id='caption' role='heading' aria-level='1'>Inspectable pages</div>
    <div style="margin: 4px">
      <span style="color: red">WARNING:</span> This page is deprecated and
      will be removed by m96. Please use
      <input type="text" readonly value="chrome://inspect" size="13"
          style="background-color: #e0e0e0; border-width: 0; font-weight: 800">
      </input> instead. Use <a href="http://crbug.com/1232509"
        >crbug.com/1232509</a> for comments, questions and feedback.
    </div>
  </div>

    <hr>
    <div id='items'>
    </div>
  </div>
</body>
</html>
